<template>
  <view class="page-main">
    <view class="body-main">
      <!--      <view class="device-status_bar"></view>-->
      <detailedCustomerCard :item="privateCustomerlist[0]"/>
    </view>
  </view>
  
</template>

<script>
  import {picker} from "@/util/reuse/picker"
  import {imageMixin} from "@/util/reuse/imageMixin"
  import detailedCustomerCard from "@/components/detailedCustomerCard.vue"

  export default {
    mixins: [picker, imageMixin],
    components: {detailedCustomerCard},
    data() {
      return {
        // 图片上传相关 start:
        maxCount: 15,
        customer: {},
        // 图片上传相关 end:
        imageList: [],
        privateCustomerlist: [],

      }
    },
    onLoad(obj) {
      console.log('item', obj.appoint, obj.status)
      if (obj.id && obj.status) {
        uni.request({
          url: `${this.$http}/api/merchant/my_private`,
          header: {
            Authorization: 'Bearer ' + this.$store.state.token
          },
          method: 'POST',
          data: {
            status: obj.status,
            id: obj.id
          },
          complete: (res) => {
            console.log('客户信息: ', res.data)
            if (res.data.code == 200) {
              this.privateCustomerlist = res.data.data
            }else if(res.data.code == 402 || res.data.code == 506){
                setTimeout(()=>{
                  this.$logout(res.data.msg);
                },1500)
              }
          }
        })
      }

    },
    methods: {
      chooseImage: async function () {
        // #ifdef APP-PLUS
        // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
        if (this.sourceTypeIndex !== 2) {
          let status = await this.checkPermission();
          if (status !== 1) {
            return;
          }
        }
        // #endif

        if (this.imageList.length === 9) {
          let isContinue = await this.isFullImg();
          console.log("是否继续?", isContinue);
          if (!isContinue) {
            return;
          }
        }
        let _this = this;
        uni.chooseImage({
          sourceType: _this.sourceType[this.sourceTypeIndex],
          sizeType: _this.sizeType[this.sizeTypeIndex],
          count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[
              this.countIndex],
          success: (res) => {
            this.imageList = this.imageList.concat(res.tempFilePaths);
          },
          fail: (err) => {
            // #ifdef APP-PLUS
            if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
              this.checkPermission(err.code);
            }
            // #endif
            // #ifdef MP
            uni.getSetting({
              success: (res) => {
                let authStatus = false;
                switch (this.sourceTypeIndex) {
                  case 0:
                    authStatus = res.authSetting['scope.camera'];
                    break;
                  case 1:
                    authStatus = res.authSetting['scope.album'];
                    break;
                  case 2:
                    authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                    break;
                  default:
                    break;
                }
                if (!authStatus) {
                  uni.showModal({
                    title: '授权失败',
                    content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting()
                      }
                    }
                  })
                }
              }
            })
            // #endif
          }
        })
      },
      isFullImg: function () {
        return new Promise((res) => {
          uni.showModal({
            content: "已经有9张图片了,是否清空现有图片？",
            success: (e) => {
              if (e.confirm) {
                this.imageList = [];
                res(true);
              } else {
                res(false)
              }
            },
            fail: () => {
              res(false)
            }
          })
        })
      },
      previewImage: function (e) {
        var current = e.target.dataset.src
        uni.previewImage({
          current: current,
          urls: this.imageList
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/styles/global";
  /*@import "src/uview-ui/common/demo.scss";*/
  
  .page-main {
    min-height: 100vh;
    background-color: $greyBackgroundColor;
    @include center;
    padding-top: 88rpx;
    padding-bottom: 30rpx;
    
    .expand-housing-nav-bar {
      margin-bottom: 30rpx;
    }
    
    .body-main {
      
      .form-main1,
      .form-main2 {
        width: 686rpx;
        background-color: #ffffff;
        border-top-left-radius: 8rpx;
        border-top-right-radius: 8rpx;
        padding: 30rpx;
        @include bottomGreyBorder;
        border-bottom-color: $blueBorderColor;
        border-width: 4rpx;
        
        .part1 {
          width: 100%;
          border-radius: 8rpx;
          flex-direction: column;
          display: flex;
          
          .row-wrapper {
            width: 100%;
            height: 150rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .left-part,
            .right-part,
            .whole-part {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: 280rpx;
              height: 112rpx;
              padding-bottom: 14rpx;
              @include bottomGreyBorder;
              
              .row-name {
                max-width: 250rpx;
                @include ellipsis;
                height: 48rpx;
                font-size: 24rpx;
                line-height: 48rpx;
                color: #969799;
                /*margin-bottom: 8rpx;*/
              }
              
              .input-wrapper {
                position: relative;
                height: 48rpx;
                width: 100%;
                
                .uni-input {
                  width: 100%;
                  font-size: 28rpx;
                  line-height: 48rpx;
                  color: #3d444c;
                  /*color: #969799;*/
                  @include ellipsis;
                  
                }
                
                .triangle-down-arrow {
                  position: absolute;
                  right: 0;
                  top: 50%;
                  margin-top: -6rpx;
                  width: 12rpx;
                  height: 12rpx;
                  background-image: url("@/static/images/record/triangle-arrow@3x.png");
                  @include contain-no-repeat-center;
                }
              }
            }
            
            .whole-part {
              width: 622rpx;
              height: 112rpx;
              @include bottomGreyBorder;
              
            }
          }
          
          .record-progress {
            width: 609rpx;
            height: 114rpx;
            border: solid 2rpx #ebedf0;
            @include center;
            
            .status-icon-text {
              width: 170rpx;
              display: flex;
              @include center;
              flex-direction: column;
              
              .icon {
                height: 38rpx;
                width: 38rpx;
                @include cover-no-repeat-center;
              }
              
              .text {
                width: 100%;
                @include ellipsis;
                height: 48rpx;
                font-size: 24rpx;
                line-height: 48rpx;
                letter-spacing: 0rpx;
                color: #ba9d61;
                text-align: center;
              }
              
              .inactive-text {
                color: #969799;
              }
              
            }
            
            .right-arrow {
              height: 30rpx;
              width: 30rpx;
              @include contain-no-repeat-center;
              /*background-color: #D8D8D8;*/
            }
            
            .active-right-arrow {
              background-image: url("@/static/images/record/right-arrow@3x.png");
              
            }
            
            .inactive-right-arrow {
              background-image: url("@/static/images/record/inactive-right-arrow@3x.png");
              
            }
          }
        }
        
        .part1,
        .part2 {
          .row {
            width: 100%;
            height: 104rpx;
            @include bottomGreyBorder;
            display: flex;
            justify-content: space-between;
            
            .row-name-left {
              height: 100%;
              align-items: center;
              display: flex;
              width: 190rpx;
              font-size: 28rpx;
            }
            
            .right-part {
              color: #bdc4ce;
              height: 100%;
              width: 450rpx;
              /*background-color: #D8D8D8;*/
              display: flex;
              align-items: center;
              
              .uni-input {
                width: 430rpx;
                height: 48rpx;
                font-size: 28rpx;
                color: #969799;
                
              }
              
              .input-wrapper {
                width: 100%;
                
                .uni-input {
                  max-width: 80rpx;
                  @include ellipsis;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
          
          .double-height-row {
            height: 212rpx;
            display: flex;
            flex-direction: column;
            width: 100%;
            
            .input-wrapper {
              width: 120rpx !important;
              margin-left: 90rpx;
              display: flex;
              align-items: center;
              
              &:first-child {
                margin-left: 0rpx;
                
              }
              
            }
          }
          
        }
        
        .part2 {
          margin-top: 48rpx;
          
          .part2-title {
            width: 100%;
            height: 48rpx;
            font-weight: bold;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #3d444c;
            margin-bottom: 24rpx;
          }
          
          .part2-desc {
            width: 442rpx;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            letter-spacing: 0rpx;
            color: #969799;
          }
          
          .blue-wide-button {
            width: 448rpx;
            margin-top: 48rpx;
          }
          
        }
        
      }
      
      .form-main2 {
        height: 962rpx;
      }
    }
    
  }
</style>

<style lang="scss">
  @import "../assets/styles/global";
  
  // 内有arrow
  .shared-picker {
    position: relative;
    
    .triangle-down-arrow,
    .arrow-down-triangle {
      width: 20rpx;
      height: 20rpx;
      @include contain-no-repeat-center;
      background-image: url("@/static/images/arrow.png");
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10rpx;
    }
    
    .arrow-down-triangle {
      width: 12rpx;
      height: 12rpx;
      margin-top: -6rpx;
      background-image: url("@/static/images/record/triangle-arrow@3x.png");
      
    }
    
  }
</style>
